<template>
<Modal v-model="edit" :title="title" v-bind="$attrs" v-on="$listeners" class-name="vertical-center-modal">
    <Form :model="formItem" ref="form">
        <Row :gutter="16">
            <Col v-for="(field, index) in formConfig" :key="field.key" :span="getFilterCol(field.col)" v-if="field.show">
            <FormItem :prop="field.key" :rules="field.rules">
                <template slot="label">
                    {{field.title}}
                    <Tooltip placement="top-start" transfer :offset="-15" v-if="field.tip">
                        <Icon type="md-alert" />
                        <div slot="content">
                            {{field.tip}}
                        </div>
                    </Tooltip>
                </template>
                <FieldRender :field="field" :fieldModel="formItem" :ref="field.key"></FieldRender>
            </FormItem>
            </Col>
        </Row>
    </Form>
    <div slot="footer">
        <Button type="text" @click="edit = false">取消</Button>
        <Button type="primary" @click.prevent="save" :loading="loading">保存</Button>
    </div>
</Modal>
</template>

<script>
import {
    initField,
    typeOf
} from '@/utils/tool.js'
export default {
    props: {
        formRender: Array,
        relationRef: {
            type: [Object]
        },
        api: Function,
        title: {
            type: String,
            default: "编辑"
        }
    },
    data() {
        return {
            formItem: {},
            edit: false,
            res: {},
            loading: false,
            data: {},
            buttonRelationRef: undefined
        }
    },
    computed: {
        comObj() {
            if (this.relationRef) {
                return this.relationRef
            } else if(this.buttonRelationRef){
                return this.buttonRelationRef
            }else if (this.$parent.$parent.$options._componentTag == "ModuleCard" && this.$parent.$parent.$slots.default && (this.$parent.$parent.$slots.default[0].componentOptions.tag == "Fields" || this.$parent.$parent.$slots.default[0].componentOptions.tag == "DataGrid")) {
                return this.$parent.$parent.$slots.default[0].componentInstance
            }
        },
        formData: function () {
            if (this.data) {
                return this.data
            } else if (this.comObj && this.comObj.$options._componentTag == "Fields") {
                return this.comObj.formItem
            } else {
                return this.formItem
            }
        },
        formConfig: function(){
            return this.formRender.filter(item => item.type != "hidden" )
        }
    },
    methods: {
        show(data) {
            this.edit = true
            this.data = data
            this.$refs.form.resetFields()
            this.formItem = Object.assign({}, this.formData)
            this.$emit("on-show", this.formItem)
        },
        async save() {
            this.loading = true

            let valid = await this.$refs.form.validate()
            if (valid) {
                this.$emit('on-before-load', this.formItem)
                let res = await this.api(this.formItem)
                if (res.isSucceed) {
                    if (this.comObj) this.comObj.loadData()

                    this.edit = false
                    this.$Message.success("保存成功");
                    let succRes = {
                        formData: this.formItem,
                        newData: res.newPrimaryKeys
                    }
                    this.$emit('on-success', succRes)
                    this.clear()
                } else {
                    this.$Message.error("保存失败" + res.message);
                }
            } else {
                this.$Message.error("验证失败");
            }

            this.loading = false
        },
        clear() {
            this.$refs.form.resetFields()
            this.formRender.map(fr => {
                initField(this.formItem, fr.models)
            })
        },
        visibility(formItemKey, status) {
            let formItem = this.formRender.find(formItem => formItem.key == formItemKey)
            if (formItem) {
                formItem.show = status
            }
        },
        getFilterCol(col){
            return col || 8
        }
    },
    created() {
        this.formRender.map(fr => {
            if (fr.show == undefined) {
                this.$set(fr, "show", true)
            }
            initField(this.formItem, fr.models)
        })
    },
}
</script>

<style lang="less">
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
        top: 0;
    }
}
</style>
<style lang="less" scoped>
/deep/ .ivu-form-item-label {
    position: relative;
    z-index: 1;
}

/deep/ .ivu-modal-body {
    background-color: #f7f7f7;
}

// /deep/ .ivu-form-item {
//     height: 68px;
// }


</style>
